<template>
	<view class="search_page">
		<view class="header_search">
			<u-search :showAction="true" actionText="重置" :animation="true" :actionStyle="actionStyle"
				placeholder="输入房源信息查询" showAction v-model.trim="searchValue" clearable @change="serchChange"
				class="serch" @clear="clearSearch" borderColor="#d6d6d6"  @custom="clearSearch"
				 ></u-search>
		</view>
		<view class="record">
			<view class="title" style="margin: 10px 0; font-size: 13px;">
				搜索历史
			</view>
			<view class="record_list">
				<u-cell-group :border="false">
					<u-cell v-for="(item, index) in historySearch" :key="item.id" icon="clock" :title="item.name"
						:isLink="true" @click="gotoaddhouse(item)">
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 搜索建议 -->
		<view class="" style="position: fixed; z-index: 999; top: 190rpx; width: 750rpx; background-color: #fff; height: 700px;"
			v-if="searchList.length != 0">
			<scroll-view class="search_view" scroll-y>
				<u-cell-group :border="false" >
					<u-cell v-for="(item, index) in searchList" :key="item.id" icon="search" :isLink="true"
						@click="gotoaddhouse(item)" :title="item.name">
					</u-cell>
				</u-cell-group>
			</scroll-view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		homeListPage,
		getCommunity, // 关键字小区搜索
		addHouseInfo, // 房东新增房源信息
		getLandlordName //搜索房东关键字
	} from "@/api/home/index.js"

	import debounce from "@/utils/debounce.js"
	export default {
		data() {
			return {
				searchIsShow: false,
				historySearch: [],

				searchList: [],
				testSearchList: [],
				isFouse: true,
				actionStyle: {
					color: "#f56e3e"
				}
			}
		},
		props: {
			backShow: {
				type: Boolean,
				default: true,
			},
			searchValue: {
				type: String,
				default: ''
			}
		},
		created() {
			var list = uni.getStorageSync('historySearch')
			// console.log(list, 'list');
			if (list) {
				this.historySearch = JSON.parse(list)
			}
			// console.log(this.historySearch, 2132213);
		},
		methods: {
			arrowLeft() {
				uni.navigateBack(-1)
			},
			serchChange: debounce(async function() {
				if (!this.isFouse) return
				const res = await getCommunity(this.searchValue)
				this.testSearchList = res.data.rows
				if (this.searchValue.length != 0) {
					this.searchIsShow = true;
					this.searchList = this.testSearchList.filter((item, index) => item.name.includes(this
						.searchValue))
				} else {
					this.searchIsShow = false;
					this.searchList = []
				}

			}, 300),
			gotoaddhouse(item) {
				this.searchValue = item.name
				var indexof = this.historySearch.findIndex(elItem => elItem.name == item.name);
				if (indexof != -1) {
					this.historySearch.splice(indexof, 1);
					this.historySearch.unshift(item);
				} else {
					this.historySearch.unshift(item);
				}
				uni.setStorageSync('historySearch', JSON.stringify(this.historySearch))
				this.isFouse = false
				this.searchIsShow = false
				uni.hideKeyboard()
				console.log(item);
				this.$emit('click', {
					longitude: item.longitude,
					latitude: item.latitude,
					keyWords: item.name
				})
			},
			inputFocus() {
				this.isFouse = true
				this.searchIsShow = true
			},
			computedtext(value) {
				return value.replace(this.searchValue, `<text style="color: red;">${this.searchValue}</text>`)
			},
			clearSearch() {
				this.searchIsShow = false;
				uni.hideKeyboard()
				this.$emit('result')
			},

		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	.search_page {


		padding: 0 30rpx;
		padding-top: 120rpx;

		.header_search {
			display: flex;
			padding: 20rpx;

			height: 108rpx;
			margin-top: 120rpx;
			// background-color: aqua;

		}

		.search_view {
			width: 100%;
			height: 100vh;
			background-color: red;
			padding: 20rpx;
			z-index: 999;

		}

		.record {
			padding: 20rpx;
			padding-left: 20rpx;

			margin-top: 30rpx;

			.title {
				font-size: 12px;
				color: #000;
				padding-left: 30rpx;
				margin-top: 20rpx;
			}

			.record_list {
				margin-top: 30rpx;
			}
		}


	}

	// ::v-deep .u-cell__body[data-v-1c4434ae] {
	// 	padding: 20rpx 0 ;
	// }
</style>